<div class="l-card">
  <div class="l-card-header">
    <div>{{componentData.title}}</div>
    <!-- <i class="layui-icon layui-icon-set l-card-icon"></i> -->
  </div>
  <div class="l-card-body" [v-loading]="loading">
    <div class="module_main">
      <span class="module_title_box word_nowrap"><span class="inline_block module_title"><i
            class="fa fa-bar-chart-o"></i> 流量统计图</span></span>
      <div class="clearfix">
        <div class="top_module operation">
          <div class="top_module  module_select_box inline_block">
            <span class="inline_block module_select_text">汇总方式
            </span><select name="" [(ngModel)]='timeTypeFlow' class="inline_block module_select"
              (change)="timeTypeFlowChange($event.target.value)">
              <option value="0">按小时统计</option>
              <option value="1">按天统计</option>
            </select>
          </div><span class="inline_block span_line">-
          </span>
          <div class="inline_block time_range">
            <input [(ngModel)]='timeRangeFlow' (change)="timeRangeFlowChange()" type="number" placeholder="近几天"
              *ngIf="timeTypeFlow === '1'" class="form-control inline_block module_time_input" />
            <input [(ngModel)]='timeRangeFlow' (change)="timeRangeFlowChange()" type="number" placeholder="近几小时"
              *ngIf="timeTypeFlow === '0'" class="form-control inline_block module_time_input" />
          </div>
          <div class="inline_block span_line">
            <span *ngIf="timeTypeFlow === '0'">小时</span><span *ngIf="timeTypeFlow === '1'">天</span>
          </div>
        </div>
      </div>
      <div id="flow-day" class="module_chart"></div>
    </div>
  </div>
</div>